<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style>
		body {
			margin: 0px;
			padding: 0px;
		}

		.tab {
			width: 100%;
			height: 100%;
			/* 设置背景颜色，背景图加载过程中会显示背景色 */
			background-color: #464646;
		}

		#mainTab {
			/* 加载背景图 */
			background-image: url(images/bg.jpg);
			/* 背景图垂直、水平均居中 */
			background-position: center center;
			/* 背景图不平铺 */
			/*background-repeat: no-repeat;*/
			/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
			background-attachment: fixed;
			/* 让背景图基于容器大小伸缩 */
			background-size: 100% 100%;

		}

		.loginInfo {
			padding-top: 80px;
		}

		.userId {
			color: white;
			text-align: center;
			font-size: 16px;
		}

		.backButton {
			padding: 20px 0px 0px 0px;
			text-align: center;
			font-size: 20px;
			width: 200px;
			height: 50px;
			background-color: black;
			color: white;
			cursor: pointer;
		}

		.contentcontent {
			background-color: #67CF22;
		}

		.topic {
			border-radius: 20px;
			margin: 30px auto 30px auto;
			padding: 20px 0px 0px 0px;
			text-align: center;
			font-size: 20px;
			color: white;
			width: 400px;
			height: 50px;
			background-color: #3dc25a;
			cursor: pointer;
		}

		.logintopic {
			margin: 5px auto 5px auto;
			padding: 0px 0px 0px 0px;
			text-align: center;
			font-size: 20px;
			color: white;
			width: 50px;
			height: 30px;
			background-color: #B22222;
			cursor: pointer;
		}

		.button2 {
			height: 30px;
			background-color: transparent;
			text-align: center;
			line-height: 30px;
			cursor: pointer;
			border: inset;
			border-width: 1px;
			border-color: transparent;
			border-bottom-color: #e5e5ce;
		}

		.left {
			float: left;
			width: 10%;
			height: 100%;
			background-color: #ffffff;
		}

		.left .backButton {
			width: 100%;
		}

		.right {
			float: right;
			width: 90%;
			height: 100%;
		}

		.title {
			padding: 20px 0px 0px 0px;
			text-align: center;
			font-size: 20px;
			width: 100%;
			height: 50px;
			background-color: #464646;
			color: #ffffff;
		}

		.messageButton {
			position: absolute;
			right: 20px;
			bottom: 20px;
			width: 100px;
			height: 100px;
			margin: auto;
			z-index: 1;
			//background-color:red;
		}

		#videoMeetingZone {
			width: 100%;
			margin: 0px auto 0px auto;
			background-color: #464646;
		}

		.msgBubble {
			text-align: left;
			word-wrap: break-word;
			-moz-border-radius: 10px;
			-webkit-border-radius: 10px;
			border-radius: 10px;
			padding: 5px;
			margin: 5px auto 5px auto;
		}

		.circle {
			border-radius: 50%;
			-moz-border-radius: 50%;
			-webkit-border-radius: 50%;
			text-align: center;
			font-size: 20px;
		}
	</style>
	<link rel="stylesheet" type="text/css" href="css/effect.css">
	<link rel="stylesheet" type="text/css" href="jquery-ui.min.css">
	<script type="text/javascript" src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
	<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="jquery-ui.min.js"></script>
	<script type="text/javascript" src="msg_box_plugin.js"></script>
	<script type="text/javascript" src="star_rtc_video.min.js"></script>
	<script type="text/javascript" src="star_rtc_lib.min.js"></script>
	<script type="text/javascript" src="cookie_tools.js"></script>
	<script type="text/javascript" src="index.js"></script>
</head>

<body>
	<div id="mainTab" class="tab">
		<div class="loginInfo">
			<div class="userImage">
				<div id="userImage" class="spinner">
				</div>
			</div>
			<div id="userId" class="userId">请先登录</div>
			<div id="login" class="logintopic">登录</div>
		</div>
		<div class="starServ" style="margin-top:100px">
			<p>
				<center style="color:white;">注：需要有摄像头才能正常使用！请使用电脑版最新的chrome浏览器测试，其它浏览器暂不打算兼容！</center>
			</p>
			<div id="voipButton" class="topic">一对一视频</div>
			<div id="videoLiveButton" class="topic">互动直播</div>
			<div id="videoMeetingButton" class="topic">多人会议</div>
			<div id="iotCarButton" class="topic">小车演示</div>

			<center>安卓和iOS程序也可以和这个页面互通：
				<a id="continue" onMouseOut="hideAndroidQr()" onmouseover="showAndroidQr()" class="a_pay">下载安卓版</a>
				<!--<a id = "continue" onMouseOut="hideiOSQr()" onmouseover="showiOSQr()" class="a_pay">下载iOS版</a>-->
				&nbsp;&nbsp;
				<a href='https://www.starrtc.com/demo/im/' target="_blank">匿名公共聊天室</a>
			</center>

			<p>
				<center style="color:white;">Copyright &copy; <a
						href='https://docs.starrtc.com/en/download/'>starRTC.com</a>&nbsp;&nbsp;&nbsp;v1.0.3</center>
			</p>

			<div id="android_app" style="display:none;height:200px;back-ground:#f00;position:absolute;"><img
					src="android.png" /></div>
			<div id="ios_app" style="display:none;height:200px;back-ground:#f00;position:absolute;"><img src="ios.png" />
			</div>
		</div>
	</div>
	<div id="voipTab" class="tab" style="display:none">
		<div id="voipResponseDlg" title="收到视频聊天申请">
			<p class="validateTips">收到来自用户：<span id="callerId"></span>的视频聊天申请.</p>
		</div>
		<div id="voipConnectDlg" title="正在呼叫用户">
			<div class="validateTips">
				<div class="spinner" style="width:100px;margin-top:10px;">
					<div class="rect1" style="margin-left:5px;"></div>
					<div class="rect2" style="margin-left:5px;"></div>
					<div class="rect3" style="margin-left:5px;"></div>
					<div class="rect4" style="margin-left:5px;"></div>
					<div class="rect5" style="margin-left:5px;"></div>
				</div>
			</div>
		</div>
		<div class="left">
			<div class="backButton">返回</div>
			<div id="voipCtrl">
				<div style="width:100%;height:100px;padding-top:25px;">
					<div id="voipCalling"
						style="width:75px;height:75px;margin:0 auto;background-image: url(images/call.jpg);background-size: cover;cursor:pointer;">
					</div>
				</div>
				<div style="width:100%;height:100px;padding-top:25px;">
					<div id="voipHangup"
						style="width:75px;height:75px;margin:0 auto;background-image: url(images/hangup.jpg);background-size: cover;cursor:pointer;">
					</div>
				</div>
			</div>
		</div>
		<div class="right">
			<div id="voipTargetIdInputWrapper" class="title" style="height:70px;padding:0px;">
				<input id="targetUserId" type="text"
					style="width: 100%;height: 100%;background: whitesmoke;padding: 0;border-width: 0;text-align: center"
					placeholder="点击这里 输入对方ID" />
			</div>
			<div id="voipZone" style="width:100%;height:100%">
				<div id="voipVideoZone" style="width:100%;height:100%">
					<div class="" style="width:100%;height:100%;position:relative;">
						<div id="voipCanvas" style="width:100%;height:100%;z-index=1;position:absolute;top:0px;left:0px;">
							<canvas id="voipMyCanvas" style="width:100%;height:100%">
							</canvas>
						</div>
						<video id="voipSmallVideo" muted="true" style="width:15%;max-height:100%;float:left"></video>
						<video id="voipBigVideo" style="max-width:85%;height:100%"></video>
					</div>
				</div>
				<div id="voipMsgWindow" style="width:15%;height:100%;float:right;position:relative;">
				</div>
				<div id="voipMessageButton" class="messageButton" style="display:none">
					<span class="svg-icon flat-line" id="line-email">
						<span class="svg-icon flat-line" id="line-message"><svg class="flat_icon" xmlns="http://www.w3.org/2000/svg"
								width="100px" height="100px" viewBox="0 0 100 100">
								<path class="circle"
									d="M50,2.125c26.441,0,47.875,21.434,47.875,47.875c0,26.441-21.434,47.875-47.875,47.875C17.857,97.875,2.125,76.441,2.125,50C2.125,23.559,23.559,2.125,50,2.125z">
								</path>
								<g class="icon">
									<path class="back"
										d="M75.139,28.854h-3.807l-8.125-8.125c-0.381-0.38-0.999-0.382-1.381,0l-8.124,8.125H36.428c-2.79,0-5.05,2.261-5.05,5.048v25.247c0,2.79,2.26,5.051,5.05,5.051h38.711c2.789,0,5.05-2.261,5.05-5.051V33.902C80.188,31.115,77.928,28.854,75.139,28.854z">
									</path>
									<path class="front"
										d="M63.571,35.8H24.862c-2.789,0-5.05,2.262-5.05,5.049v25.247c0,2.788,2.261,5.049,5.05,5.049h3.806l8.125,8.125c0.382,0.381,1,0.383,1.381,0l8.125-8.125h17.275c2.788,0,5.05-2.261,5.05-5.049V40.85C68.62,38.062,66.361,35.8,63.571,35.8z">
									</path>
									<path class="dots"
										d="M34.743,50.108c-1.858,0-3.365,1.507-3.365,3.366c0,1.86,1.506,3.367,3.365,3.367c1.86,0,3.367-1.507,3.367-3.367C38.109,51.615,36.603,50.108,34.743,50.108z M44.842,50.108c-1.858,0-3.367,1.507-3.367,3.366c0,1.86,1.507,3.367,3.367,3.367c1.859,0,3.366-1.507,3.366-3.367C48.208,51.615,46.701,50.108,44.842,50.108z M54.94,50.108c-1.857,0-3.365,1.507-3.365,3.366c0,1.86,1.506,3.367,3.365,3.367c1.86,0,3.366-1.507,3.366-3.367C58.307,51.615,56.8,50.108,54.94,50.108z">
									</path>
								</g>
							</svg></span>
					</span>
				</div>
			</div>
		</div>
	</div>
	<div id="videoLiveTab" class="tab" style="display:none">
		<div id="videoLiveCreateDlg" title="创建直播">
			<p class="validateTips">请输入直播的名称.</p>
			<div>
				<input type="text" name="newLiveName" id="newLiveName" value="" class="text ui-widget-content ui-corner-all">
			</div>
			<div style="margin-top:10px">
				<input type="checkbox" id="liveTypecheck" style="display:none"><label for="liveTypecheck"
					style="display:none">公开</label>
			</div>
		</div>
		<div id="videoLiveDelDlg" title="离开直播">
			<p class="validateTips">确定要离开直播间吗？</p>
		</div>
		<div id="videoLiveCanvasDlg" title="画板">
			<div style="width:100%;height:100%;position:relative;">
				<div id="videoLiveCanvas" style="width:100%;height:100%;z-index=1;position:absolute;top:0px;left:0px;">
					<canvas id="videoLiveMyCanvas" style="width:100%;height:100%">
					</canvas>
				</div>
			</div>
		</div>
		<div id="videoLiveApplyDlg" title="申请直播连麦">
			<p class="validateTips">申请直播连麦吗？</p>
		</div>
		<div id="videoLiveManageDlg" title="用户管理">
			<p class="validateTips">收到来自用户：<span id="applyTargetId"></span>的连麦申请.</p>
		</div>

		<div class="left">
			<div class="backButton">返回</div>
			<div id="videoLiveList"></div>
		</div>
		<div class="right" style="position:relative;">
			<div id="videoLiveTitle" class="title"></div>
			<div id="videoLiveZone" style="width:100%;height:100%;background-color:#464646;position:relative;">
				<div id="videoLiveVideoZone" style="width:100%;height:100%">
					<div class="" style="width:100%;height:100%">
						<video id="videoLiveSelfVideo" muted="true" style="width:100%;height:100%" />
					</div>
				</div>
				<div id="videoLiveMsgWindow" style="width:15%;height:100%;float:right;position:relative;">
				</div>
				<div id="vidoeLiveMessageButton" class="messageButton">
					<span class="svg-icon flat-line" id="line-email">
						<svg class="flat_icon" xmlns="http://www.w3.org/2000/svg" width="100px" height="100px"
							viewBox="0 0 100 100">
							<path class="circle"
								d="M50,2.125c26.441,0,47.875,21.434,47.875,47.875c0,26.441-21.434,47.875-47.875,47.875C17.857,97.875,2.125,76.441,2.125,50C2.125,23.559,23.559,2.125,50,2.125z">
							</path>
							<g class="icon">
								<path class="top"
									d="M76.162,35.079c1.113,0.731,1.113,1.917,0,2.647L52.013,53.615c-1.11,0.731-2.915,0.731-4.024,0l-24.15-15.889c-1.111-0.73-1.111-1.916,0-2.647l24.15-15.889c1.11-0.729,2.914-0.729,4.024,0L76.162,35.079z">
								</path>
								<path class="paper" d="M30.105,32.763h39.791v28.421H30.105V32.763z"></path>
								<path class="base"
									d="M23.003,36.404L50,54.165l26.997-17.761c0,0,0.006-0.667,0.006,1.688v27.002c0,2.354-1.91,4.264-4.264,4.264H27.262c-2.354,0-4.264-1.91-4.264-4.264V38.092C23,35.738,23.003,36.404,23.003,36.404z">
								</path>
								<path class="text"
									d="M36.145,38.27h27.71c0.199,0,0.357-0.16,0.357-0.356c0-0.195-0.158-0.355-0.357-0.355h-27.71c-0.197,0-0.355,0.16-0.355,0.355C35.788,38.11,35.947,38.27,36.145,38.27z M63.854,39.691H36.144c-0.197,0-0.355,0.159-0.355,0.356c0,0.196,0.158,0.355,0.355,0.355h27.711c0.197,0,0.357-0.16,0.357-0.355C64.211,39.849,64.053,39.691,63.854,39.691z M63.854,41.822H36.144c-0.197,0-0.355,0.161-0.355,0.356c0,0.197,0.158,0.355,0.355,0.355h27.711c0.197,0,0.357-0.158,0.357-0.355C64.211,41.982,64.053,41.822,63.854,41.822z">
								</path>
							</g>
						</svg>
					</span>
				</div>
				<div id="vidoeLiveApplyButton"
					style="position:absolute;left:20px;bottom:150px;width:100px;height:100px;margin:auto;z-index:1">
					<span class="svg-icon flat-line" id="line-mic"><svg class="flat_icon" xmlns="http://www.w3.org/2000/svg"
							width="100px" height="100px" viewBox="0 0 100 100">
							<path class="circle"
								d="M50,2.125c26.441,0,47.875,21.434,47.875,47.875c0,26.441-21.434,47.875-47.875,47.875C17.857,97.875,2.125,76.441,2.125,50C2.125,23.559,23.559,2.125,50,2.125z">
							</path>
							<g class="icon">
								<path class="base"
									d="M50,19.317c8.592,0,15.557,6.964,15.557,15.558v12.101c0,8.593-6.965,15.558-15.557,15.558s-15.558-6.965-15.558-15.558V34.875C34.443,26.281,41.408,19.317,50,19.317z">
								</path>
								<path class="stand"
									d="M74.201,46.975c0-1.433-1.161-2.594-2.592-2.594c-1.434,0-2.595,1.161-2.595,2.594c0,10.501-8.512,19.015-19.014,19.015c-10.501,0-19.015-8.514-19.015-19.015c0-1.433-1.16-2.594-2.593-2.594c-1.432,0-2.593,1.161-2.593,2.594c0,12.49,9.461,22.765,21.607,24.06v4.461h-6.913c-1.432,0-2.594,1.162-2.594,2.594s1.161,2.594,2.594,2.594h19.014c1.433,0,2.593-1.162,2.593-2.594s-1.16-2.594-2.593-2.594h-6.915v-4.461C64.739,69.74,74.201,59.463,74.201,46.975z">
								</path>
								<path class="bars_left"
									d="M34.443,33.146v3.458h10.372v-3.458H34.443z M34.443,42.653h10.372v-3.457H34.443V42.653z M34.443,48.704h10.372v-3.458H34.443V48.704z">
								</path>
								<g class="bars_right">
									<rect x="55.187" y="33.146" width="10.371" height="3.458"></rect>
									<rect x="55.187" y="39.196" width="10.371" height="3.457"></rect>
									<rect x="55.187" y="45.246" width="10.371" height="3.458"></rect>
								</g>
							</g>
						</svg></span>
				</div>
				<div id="vidoeCanvasButton"
					style="position:absolute;left:150px;bottom:20px;width:100px;height:100px;margin:auto;z-index:1">
					<span class="svg-icon flat-line" id="line-mic"><svg class="flat_icon" xmlns="http://www.w3.org/2000/svg"
							width="100px" height="100px" viewBox="0 0 100 100">
							<path class="circle"
								d="M50,2.125c26.441,0,47.875,21.434,47.875,47.875c0,26.441-21.434,47.875-47.875,47.875C17.857,97.875,2.125,76.441,2.125,50C2.125,23.559,23.559,2.125,50,2.125z">
							</path>
							<g class="icon">
								<path class="base"
									d="M50,19.317c8.592,0,15.557,6.964,15.557,15.558v12.101c0,8.593-6.965,15.558-15.557,15.558s-15.558-6.965-15.558-15.558V34.875C34.443,26.281,41.408,19.317,50,19.317z">
								</path>
								<path class="stand"
									d="M74.201,46.975c0-1.433-1.161-2.594-2.592-2.594c-1.434,0-2.595,1.161-2.595,2.594c0,10.501-8.512,19.015-19.014,19.015c-10.501,0-19.015-8.514-19.015-19.015c0-1.433-1.16-2.594-2.593-2.594c-1.432,0-2.593,1.161-2.593,2.594c0,12.49,9.461,22.765,21.607,24.06v4.461h-6.913c-1.432,0-2.594,1.162-2.594,2.594s1.161,2.594,2.594,2.594h19.014c1.433,0,2.593-1.162,2.593-2.594s-1.16-2.594-2.593-2.594h-6.915v-4.461C64.739,69.74,74.201,59.463,74.201,46.975z">
								</path>
								<path class="bars_left"
									d="M34.443,33.146v3.458h10.372v-3.458H34.443z M34.443,42.653h10.372v-3.457H34.443V42.653z M34.443,48.704h10.372v-3.458H34.443V48.704z">
								</path>
								<g class="bars_right">
									<rect x="55.187" y="33.146" width="10.371" height="3.458"></rect>
									<rect x="55.187" y="39.196" width="10.371" height="3.457"></rect>
									<rect x="55.187" y="45.246" width="10.371" height="3.458"></rect>
								</g>
							</g>
						</svg></span>
				</div>
				<div id="vidoeLiveCreateButton"
					style="position:absolute;left:20px;bottom:20px;width:100px;height:100px;margin:auto;z-index:1">
					<span class="svg-icon flat-line" id="line-pencil"><svg class="flat_icon" xmlns="http://www.w3.org/2000/svg"
							width="100px" height="100px" viewBox="0 0 100 100">
							<path class="circle"
								d="M50,4.25c26.441,0,47.875,21.434,47.875,47.875C97.875,78.566,76.441,100,50,100C17.857,100,2.125,78.566,2.125,52.125C2.125,25.684,23.559,4.25,50,4.25z">
							</path>
							<g class="icon">
								<path class="wood" d="M26.683,55.108l16.801,16.84L23.62,75.635L26.683,55.108z"></path>
								<path class="base_top" d="M53.408,28.524l5.809,5.813L32.489,61.012l-5.807-5.75L53.408,28.524z"></path>
								<path class="base_bottom" d="M63.639,38.64l6.569,6.572L43.483,71.948l-6.635-6.575L63.639,38.64z"></path>
								<path class="base_middle" d="M58.868,33.931l6.569,6.573L38.714,67.239l-6.569-6.574L58.868,33.931z">
								</path>
								<path class="tip" d="M31.731,74.101l-8.635,1.776l1.776-8.638L31.731,74.101z"></path>
								<path class="eraser"
									d="M65.004,23.567l10.455,10.461c1.926,1.926,1.926,5.049,0,6.975L58.03,23.567C59.958,21.642,63.078,21.642,65.004,23.567z">
								</path>
								<path class="metal"
									d="M58.555,22.899l17.429,17.437c0.322,0.321,0.322,0.843,0,1.163l-4.244,4.246c-0.32,0.322-0.841,0.322-1.163,0L53.147,28.308c-0.319-0.32-0.319-0.842,0-1.161l4.245-4.248C57.715,22.578,58.235,22.578,58.555,22.899z">
								</path>
							</g>
						</svg></span>
				</div>
			</div>
		</div>
	</div>
	<div id="videoMeetingTab" class="tab" style="display:none">

		<div id="videoMeetingCreateDlg" title="创建会议室">
			<p class="validateTips">请输入会议室的名称.</p>
			<div>
				<input type="text" name="newMeetingName" id="newMeetingName" value=""
					class="text ui-widget-content ui-corner-all">
			</div>
			<div style="margin-top:10px">
				<input type="checkbox" id="meetingTypecheck"><label for="meetingTypecheck">公开</label>
			</div>
		</div>

		<div id="videoMeetingDelDlg" title="离开会议室">
			<p class="validateTips">确定要离开会议室吗？</p>
		</div>

		<div class="left">
			<div class="backButton">返回</div>
			<div id="videoMeetingList"></div>
		</div>
		<div class="right" style="position:relative;">
			<div id="videoMeetingTitle" class="title"></div>
			<div id="videoMeetingZone" style="width:100%;height:100%">
				<div id="videoMeetingVideoZone" style="width:100%;height:100%">
					<div class="" style="width:100%;height:100%">
						<video id="videoMeetingSelfVideo" muted="true" style="width:100%;height:100%" />
					</div>
				</div>
				<div id="videoMeetingMsgWindow" style="width:15%;height:100%;float:right;position:relative;">
				</div>
				<div id="vidoeMeetingMessageButton" class="messageButton">
					<span class="svg-icon flat-line" id="line-email">
						<svg class="flat_icon" xmlns="http://www.w3.org/2000/svg" width="100px" height="100px"
							viewBox="0 0 100 100">
							<path class="circle"
								d="M50,2.125c26.441,0,47.875,21.434,47.875,47.875c0,26.441-21.434,47.875-47.875,47.875C17.857,97.875,2.125,76.441,2.125,50C2.125,23.559,23.559,2.125,50,2.125z">
							</path>
							<g class="icon">
								<path class="top"
									d="M76.162,35.079c1.113,0.731,1.113,1.917,0,2.647L52.013,53.615c-1.11,0.731-2.915,0.731-4.024,0l-24.15-15.889c-1.111-0.73-1.111-1.916,0-2.647l24.15-15.889c1.11-0.729,2.914-0.729,4.024,0L76.162,35.079z">
								</path>
								<path class="paper" d="M30.105,32.763h39.791v28.421H30.105V32.763z"></path>
								<path class="base"
									d="M23.003,36.404L50,54.165l26.997-17.761c0,0,0.006-0.667,0.006,1.688v27.002c0,2.354-1.91,4.264-4.264,4.264H27.262c-2.354,0-4.264-1.91-4.264-4.264V38.092C23,35.738,23.003,36.404,23.003,36.404z">
								</path>
								<path class="text"
									d="M36.145,38.27h27.71c0.199,0,0.357-0.16,0.357-0.356c0-0.195-0.158-0.355-0.357-0.355h-27.71c-0.197,0-0.355,0.16-0.355,0.355C35.788,38.11,35.947,38.27,36.145,38.27z M63.854,39.691H36.144c-0.197,0-0.355,0.159-0.355,0.356c0,0.196,0.158,0.355,0.355,0.355h27.711c0.197,0,0.357-0.16,0.357-0.355C64.211,39.849,64.053,39.691,63.854,39.691z M63.854,41.822H36.144c-0.197,0-0.355,0.161-0.355,0.356c0,0.197,0.158,0.355,0.355,0.355h27.711c0.197,0,0.357-0.158,0.357-0.355C64.211,41.982,64.053,41.822,63.854,41.822z">
								</path>
							</g>
						</svg>
					</span>
				</div>
				<div id="vidoeMeetingCreateButton"
					style="position:absolute;left:20px;bottom:20px;width:100px;height:100px;margin:auto;z-index:1">
					<span class="svg-icon flat-line" id="line-pencil"><svg class="flat_icon" xmlns="http://www.w3.org/2000/svg"
							width="100px" height="100px" viewBox="0 0 100 100">
							<path class="circle"
								d="M50,4.25c26.441,0,47.875,21.434,47.875,47.875C97.875,78.566,76.441,100,50,100C17.857,100,2.125,78.566,2.125,52.125C2.125,25.684,23.559,4.25,50,4.25z">
							</path>
							<g class="icon">
								<path class="wood" d="M26.683,55.108l16.801,16.84L23.62,75.635L26.683,55.108z"></path>
								<path class="base_top" d="M53.408,28.524l5.809,5.813L32.489,61.012l-5.807-5.75L53.408,28.524z"></path>
								<path class="base_bottom" d="M63.639,38.64l6.569,6.572L43.483,71.948l-6.635-6.575L63.639,38.64z"></path>
								<path class="base_middle" d="M58.868,33.931l6.569,6.573L38.714,67.239l-6.569-6.574L58.868,33.931z">
								</path>
								<path class="tip" d="M31.731,74.101l-8.635,1.776l1.776-8.638L31.731,74.101z"></path>
								<path class="eraser"
									d="M65.004,23.567l10.455,10.461c1.926,1.926,1.926,5.049,0,6.975L58.03,23.567C59.958,21.642,63.078,21.642,65.004,23.567z">
								</path>
								<path class="metal"
									d="M58.555,22.899l17.429,17.437c0.322,0.321,0.322,0.843,0,1.163l-4.244,4.246c-0.32,0.322-0.841,0.322-1.163,0L53.147,28.308c-0.319-0.32-0.319-0.842,0-1.161l4.245-4.248C57.715,22.578,58.235,22.578,58.555,22.899z">
								</path>
							</g>
						</svg></span>
				</div>
			</div>
		</div>
	</div>
	<div id="iotCarTab" class="tab" style="display:none">
		<div class="left">
			<div class="backButton">返回</div>
		</div>
		<div class="right">
			<div id="iotCarTitle" class="title">
				小车示例程序
			</div>
			<div id="iotCarZone" style="width:100%;height:100%">
				<div id="iotCarCtrlZone" style="width:30%;height:100%;float:left">
					<div style="width:100%;height:15%;position:relative;">
						<div id="iotCarStart" class="topic"
							style="background-color:white;margin:auto;position:absolute;top:0;left:0;bottom:0;right:0;">启动小车</div>
					</div>
					<div style="width:100%;height:20%;position:relative;">
						<div id="iotCarCtrlUp"
							style="background-image: url(images/icon_ctrl_up.png);background-size: cover;width:100px;height:100px;margin:auto;position:absolute;top:0;left:0;bottom:0;right:0;cursor:pointer;">
						</div>
					</div>
					<div style="width:50%;height:20%;position:relative;float:left">
						<div id="iotCarCtrlLeft"
							style="background-image: url(images/icon_ctrl_left.png);background-size: cover;width:100px;height:100px;margin:auto;position:absolute;top:0;left:0;bottom:0;right:0;cursor:pointer;">
						</div>
					</div>
					<div style="width:50%;height:20%;position:relative;float:right">
						<div id="iotCarCtrlRight"
							style="background-image: url(images/icon_ctrl_right.png);background-size: cover;width:100px;height:100px;margin:auto;position:absolute;top:0;left:0;bottom:0;right:0;cursor:pointer;">
						</div>
					</div>
					<div style="width:100%;height:20%;position:relative;clear:both">
						<div id="iotCarCtrlDown"
							style="background-image: url(images/icon_ctrl_down.png);background-size: cover;width:100px;height:100px;margin:auto;position:absolute;top:0;left:0;bottom:0;right:0;cursor:pointer;">
						</div>
					</div>
					<div style="width:100%;height:25%;position:relative;">
						<div id="iotCarDragZone" class="circle"
							style="background-color:white;width:200px;height:200px;margin:auto;position:absolute;top:0;left:0;bottom:0;right:0;">
							<div style="width:100%;height:100%;position:relative;">
								<div style="width:100px;height:100px;margin:auto;position:absolute;top:0;left:0;bottom:0;right:0;">
									<div id="iotCarDrag" class="circle"
										style="cursor:pointer;background-color:#464646;width:100px;height:100px;line-height:100px;">云台控制
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div id="iotCarVideoZone" style="width:70%;height:100%;float:right;">

				</div>
				<!-- <div id="iotCarMsgWindow" style="width:15%;height:100%;float:right;position:relative;">
				</div>
				<div id="iotCarMessageButton" class="messageButton">
					<span class="svg-icon flat-line" id="line-email">
						<span class="svg-icon flat-line" id="line-message"><svg class="flat_icon" xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewBox="0 0 100 100"><path class="circle" d="M50,2.125c26.441,0,47.875,21.434,47.875,47.875c0,26.441-21.434,47.875-47.875,47.875C17.857,97.875,2.125,76.441,2.125,50C2.125,23.559,23.559,2.125,50,2.125z"></path><g class="icon"><path class="back" d="M75.139,28.854h-3.807l-8.125-8.125c-0.381-0.38-0.999-0.382-1.381,0l-8.124,8.125H36.428c-2.79,0-5.05,2.261-5.05,5.048v25.247c0,2.79,2.26,5.051,5.05,5.051h38.711c2.789,0,5.05-2.261,5.05-5.051V33.902C80.188,31.115,77.928,28.854,75.139,28.854z"></path><path class="front" d="M63.571,35.8H24.862c-2.789,0-5.05,2.262-5.05,5.049v25.247c0,2.788,2.261,5.049,5.05,5.049h3.806l8.125,8.125c0.382,0.381,1,0.383,1.381,0l8.125-8.125h17.275c2.788,0,5.05-2.261,5.05-5.049V40.85C68.62,38.062,66.361,35.8,63.571,35.8z"></path><path class="dots" d="M34.743,50.108c-1.858,0-3.365,1.507-3.365,3.366c0,1.86,1.506,3.367,3.365,3.367c1.86,0,3.367-1.507,3.367-3.367C38.109,51.615,36.603,50.108,34.743,50.108z M44.842,50.108c-1.858,0-3.367,1.507-3.367,3.366c0,1.86,1.507,3.367,3.367,3.367c1.859,0,3.366-1.507,3.366-3.367C48.208,51.615,46.701,50.108,44.842,50.108z M54.94,50.108c-1.857,0-3.365,1.507-3.365,3.366c0,1.86,1.506,3.367,3.365,3.367c1.86,0,3.366-1.507,3.366-3.367C58.307,51.615,56.8,50.108,54.94,50.108z"></path></g></svg></span>
					</span>
				</div> -->
			</div>
		</div>
	</div>
</body>

</html>